{% extends 'base.html' %}
{% load checkboxes %}

{% block title_suffix %}
{% if edit_group %}
	| Edit group
{% else %}
	| Create group
{% endif %}
    
{% endblock %}

{% block all_content %}
{% if edit_group %}
	<div class="page-header">
		<h1>Edit group <small></small></h1>
	</div>
{% else %}
	<div class="page-header">
		<h1>Create group <small></small></h1>
	</div>
{% endif %}
	
<form class="form-horizontal" action=
{% if edit_group %}
			"/auth/edit-group/{{ edit_group.id }}/"
{% else %}
			"/auth/create-group/"
{% endif %}

 method="post">
	{% csrf_token %}
	
<div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Information</a></li>
	<li><a href="#tab2" data-toggle="tab">Permissions</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
		 {% if group_saved %}
		<div class="alert">
			 Group {{ edit_group.name }} saved
		</div>
		{% endif %}
		 {% if required_fields %}
		<div class="alert">
			 Please fill in the required fields(*)
		</div>
		{% endif %}
		{% if name_unavailable %}
		<div class="alert">
			 The username is unavailable
		</div>
		{% endif %}
		<div class="control-group">
			<label class="control-label" for="inputName">Group name</label>
			<div class="controls">
				<input type="text" id="inputName" name="inputName" {% if edit_group %}value="{{edit_group.name}}" {% endif %} placeholder="Group name">
			</div>
		</div>
	</div>
	<div class="tab-pane" id="tab2">
		<div class="control-group">	
				<table class="table table-condensed table-bordered table-striped">
				<thead><th>Permission</td><th>Has</th></thead>
				{% if edit_group %}
					{% group_permission_boxes edit_group %}
				{% else %}
					{% permission_boxes %}
				{% endif %}
				</table>			
		</div>
    </div>
  </div>
</div>                     


<div class="control-group">
	<div class="controls">
		<button type="submit" class="btn btn-large btn-primary">
		{% if edit_group %}
			Save changes
		{% else %}
			Create Group
		{% endif %}
		</button>
	</div>
</div>
</form>


{% endblock %}

{% block scripts %}

{% endblock %}